<template>
  <div class="h-[calc(100%-52px)] file-list]">
    <el-checkbox-group
      @change="select"
      v-model="fileListCheckBox"
      size="large"
      :max="props.limit"
      class="h-1/1 relative overflow-scroll"
    >
      <div class="h-1/1">
        <div v-for="(p, index) in fileList" :key="index" class="mt-20px box-border px-20px mr-20px float-left relative">
          {{ p }}
          <el-checkbox
            size="large"
            class="absolute top-[-10px] left-0"
            :label="{ id: (p as any).id, url: (p as any).url, type: (p as any).type, cover: (p as any).cover }"
          />
          <div class="flex justify-center box-border p-10px">
            <el-image
              :src="
                typeJudge((p as any).type) === 'image'
                  ? userInfo.prefix + (p as any).url
                  : typeJudge((p as any).type) === 'video'
                  ? userInfo.prefix + (p as any).cover
                  : './unknown.png'
              "
              class="w-80px cursor-pointer"
              style="aspect-ratio: 1/1"
              fit="scale-down"
              :hide-on-click-modal="true"
              lazy
              @click="openOrDownload(p)"
            >
              <template #error>
                <div @click="openOrDownload(p)" class="w-1/1 h-1/1">
                  <el-image src="./shipin.png"></el-image>
                </div>
              </template>
              <el-image-viewer></el-image-viewer>
            </el-image>
          </div>
          <el-tooltip :content="(p as any).name">
            <div class="w-100px text-center overflow-ellipsis text-14px whitespace-nowrap overflow-ellipsis overflow-hidden">
              <span style="line-height: 120%">{{ (p as any).name }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-checkbox-group>
    <el-pagination
      background
      layout="prev,pager,next"
      :total="pageTotal"
      :default-page-size="props.initParams.pageSize"
      :default-current-page="props.initParams.pageNum"
      class="bottom-50px right-0 absolute"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
    ></el-pagination>
    <video-player ref="playRef"></video-player>
    <el-image-viewer :url-list="previewList" :initial-index="initIndex" v-if="isShow" @close="isShow = false"></el-image-viewer>
  </div>
</template>

<script setup lang="ts" name="fileList">
import { watch, ref, computed } from "vue";
import VideoPlayer from "@/components/videoPlayer/index.vue";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const emits = defineEmits(["select"]);

// ----------多选框选择
const fileListCheckBox = ref([]);

// ---------文件类型判断
const imageTypes = ["png", "jpg", "jpeg", "gif", "webp"];
const videoTypes = ["video/avi", "video/mov", "video/mp4", "mp4", "avi", "mov"];

const typeJudge = (type: string) => {
  if (imageTypes.includes(type)) return "image";
  if (videoTypes.includes(type)) return "video";
  return "unknown";
};

const fileList = ref([]);
const pageTotal = ref(0);

// 当前的可以浏览的列表
const previewList = computed(() => {
  return fileList.value.filter((e: any) => typeJudge(e.type) === "image").map((e: any) => userInfo.prefix + e.url);
});

// ----是否展示图片预览
const isShow = ref(false);

// ----当前图片预览的索引
const initIndex = ref(0);

type Props = {
  initParams: any;
  limit?: number;
  api: (params: any) => Promise<any>;
};

const props = withDefaults(defineProps<Props>(), {
  limit: 10000
});

watch(
  () => props.initParams,
  async () => {
    const {
      data: { list, total }
    } = (await props.api(props.initParams)) as any;
    fileList.value = list;
    pageTotal.value = total;
  },
  { immediate: true, deep: true }
);

const refresh = async () => {
  const {
    data: { list, total }
  } = (await props.api(props.initParams)) as any;
  fileList.value = list;
  pageTotal.value = total;
};

// -----------打开播放器或者下载文件
const playRef = ref<InstanceType<typeof VideoPlayer> | null>();

const openOrDownload = (p: any) => {
  console.log(p);
  if (typeJudge(p.type) === "image") {
    isShow.value = true;
    const index = previewList.value.findIndex(e => e === userInfo.prefix + p.url);
    initIndex.value = index;
    return;
  }

  if (typeJudge(p.type) === "video") {
    playRef.value?.acceptParams(p);
  }
};

// ---------页面修改
const pageChange = (num: number) => {
  props.initParams.pageNum = num;
};

// --------素材选中时候的值
const select = (list: any) => {
  emits("select", list);
};

// ----情况选择
const clear = () => {
  fileListCheckBox.value = []; //情况数组
};

defineExpose({
  refresh,
  clear
});
</script>

<style lang="scss" scoped>
:deep(.el-checkbox) {
  .el-checkbox__label {
    display: none;
  }
}
</style>
